<template>
  <div class="components-container magicHome">
    <split-pane split="vertical" :min-percent="15" :default-percent="15" style="position:unset;">
      <template slot="paneL">
        <div class="leftArea">
          <el-input
            v-model="filterText"
            class="filterText"
            :maxlength="30"
            clearable
            size="small"
            :placeholder="$t('关键字(回车搜索)')"
            :title="$t('关键字(回车搜索)')"
            @keyup.enter.native="queryHandle"
            @clear="queryHandle"
          />
          <div class="reportList" style="height: calc(100% - 30px);">
            <!-- 我创建的 -->
            <div>
              <p>
                <i class="tit">{{ $t('我创建的') }}</i>
                <span class="line" />
                <el-dropdown @command="handleCommand($event, 'me')">
                  <span class="el-dropdown-link">
                    <i class="el-icon-plus" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="mkdir">{{ $t('新建文件夹') }}</el-dropdown-item>
                    <el-dropdown-item command="createReport">
                      <router-link
                        ref="createReport"
                        target="_blank"
                        :to="{name:'createReport', query: { v: 1 }}"
                        @refresh="refreshHandle"
                      >{{ $t('新建自助报表') }}</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item command="createEasyReport">
                      <router-link
                        ref="createEasyReport"
                        target="_blank"
                        :to="{name:'createEasyReport', query: { v: 1 }}"
                        @refresh="refreshHandle"
                      >{{ $t('新建快捷报表') }}</router-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </p>
              <el-tree
                ref="tree"
                v-loading="dirLoading"
                :indent="0"
                :data="data"
                :props="defaultProps"
                default-expand-all
                draggable
                :allow-drag="allowDragFunc"
                :allow-drop="allowDropFunc"
                :expand-on-click-node="false"
                node-key="reportId"
                @node-drop="nodeDropHandle"
                @node-click="nodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <div v-if="data.dirType === 'dir'" class="rows">
                    <span class="titTree"><i class="el-icon-fold" />{{ $t(node.label) }}</span>
                    <span class="more">
                      <el-dropdown @command="dirCommand($event, node)">
                        <span class="el-dropdown-link">
                          <i class="el-icon-more" style="transform: rotate(90deg);" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>
                            <router-link
                              target="_blank"
                              :to="{path:'/createReport', query: { dirId: data.dirId }}"
                              class="link_a"
                            >{{ $t('新建自助报表') }}</router-link>
                          </el-dropdown-item>
                          <el-dropdown-item command="createEasyReport">
                            <router-link
                              ref="createEasyReport"
                              target="_blank"
                              :to="{name:'createEasyReport', query: { dirId: data.dirId }}"
                              @refresh="refreshHandle"
                            >{{ $t('新建快捷报表') }}</router-link>
                          </el-dropdown-item>
                          <el-dropdown-item command="edit">{{ $t('编辑') }}</el-dropdown-item>
                          <el-dropdown-item command="shared">{{ $t('分享') }}</el-dropdown-item>
                          <el-dropdown-item command="delete">{{ $t('删除') }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </span>
                  </div>
                  <div v-else class="rows">
                    <span class="titTree">{{ $t(node.label) }}</span>
                    <span class="more">
                      <el-dropdown @command="reportDropdownClick($event, data)">
                        <span class="el-dropdown-link">
                          <i class="el-icon-more" style="transform: rotate(90deg);" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>
                            <router-link
                              target="_blank"
                              :to="{path: data.reportType === 'report' ? '/createReport' : '/createEasyReport', query: { reportId: data.reportId }}"
                              class="link_a"
                            >{{ $t('编辑') }}</router-link>
                          </el-dropdown-item>
                          <el-dropdown-item command="share">{{ $t('分享') }}</el-dropdown-item>
                          <el-dropdown-item command="release">{{ $t('发布') }}</el-dropdown-item>
                          <el-dropdown-item command="delReport">{{ $t('删除') }}</el-dropdown-item>
                          <el-dropdown-item command="export">{{ $t('导出') }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                    </span>
                  </div>

                </span>
              </el-tree>
            </div>
            <!-- 分享给我的 -->
            <div>
              <p>
                <i class="tit">{{ $t('分享给我的') }}</i>
                <span class="line" />
                <el-dropdown @command="handleCommand($event, 'shared')">
                  <span class="el-dropdown-link">
                    <i class="el-icon-plus" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="mkdir">{{ $t('新建文件夹') }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </p>
              <el-tree
                v-loading="dirLoading"
                :data="sharedData"
                :props="defaultProps"
                :indent="0"
                default-expand-all
                draggable
                :allow-drag="allowDragFunc"
                :allow-drop="allowDropFunc"
                :expand-on-click-node="false"
                @node-drop="nodeDropHandle"
                @node-click="nodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <div v-if="data.dirType === 'dir'" class="rows">
                    <span class="titTree"><i class="el-icon-fold" />{{ $t(node.label) }}</span>
                    <span class="more">
                      <el-dropdown @command="dirCommand($event, node)">
                        <span class="el-dropdown-link">
                          <i class="el-icon-more" style="transform: rotate(90deg);" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-if="!node.data.permissions" command="edit">{{ $t('编辑') }}</el-dropdown-item>
                          <el-dropdown-item command="delete">{{ $t('删除') }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </span>
                  </div>
                  <div v-else class="rows">
                    <span class="titTree">{{ $t(node.label) }}</span>
                    <span class="more">
                      <el-dropdown @command="reportShareClick($event, data)">
                        <span class="el-dropdown-link">
                          <i class="el-icon-more" style="transform: rotate(90deg);" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-if="data.permissions === 'edit' || node.parent.data.permissions === 'edit'">
                            <router-link
                              target="_blank"
                              :to="{path: data.reportType === 'report' ? '/createReport' : '/createEasyReport', query: { reportId: data.reportId }}"
                              class="link_a"
                            >{{ $t('编辑') }}</router-link>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="data.shareId" command="delShareReport">{{ $t('删除') }}</el-dropdown-item>
                          <el-dropdown-item command="export">{{ $t('导出') }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                    </span>
                  </div>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </template>
      <!-- 内容区域 -->
      <template slot="paneR" style="overflow:auto;">
        <vue-friendly-iframe v-if="viewReportURL && viewReportURL !== ''" ref="iframe" class="iframe" :src="viewReportURL" />
      </template>
    </split-pane>

    <!-- 新建文件夹 -->
    <el-dialog
      v-el-drag-dialog
      :title="dirTitle"
      :visible.sync="newDir"
      append-to-body
      width="30%"
      :close-on-click-modal="false"
      :lock-scroll="false"
    >
      <el-form ref="form" :model="form" :rules="rules" class="dataForm">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('文件夹名称')" prop="name">
              <el-input v-model="form.name" :placeholder="$t('文件夹名称')" show-word-limit maxlength="120" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeForm">{{ $t('取 消') }}</el-button>
        <el-button size="small" type="primary" @click="saveDir">{{ $t('确 定') }}</el-button>
      </span>
    </el-dialog>

    <!-- 分享 -->
    <el-dialog
      :title="$t('分享报表')"
      :visible.sync="shareOpen"
      append-to-body
      width="30%"
      :close-on-click-modal="false"
      :lock-scroll="false"
    >
      <el-form ref="form" :model="shareForm" :rules="rules" class="dataForm">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('分享用户')" prop="userId">
              <user-select v-model="shareForm.userId" :placeholder="$t('分享用户')" multiple collapse-tags />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('分享角色')" prop="roleId">
              <el-select v-model="shareForm.roleId" :placeholder="$t('分享角色')" multiple collapse-tags filterable>
                <el-option
                  v-for="item in roleOptions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.roleName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('权限')" prop="permissions">
              <el-select v-model="shareForm.permissions" :placeholder="$t('权限')" style="width:100%;">
                <el-option value="view" :label="$t('查看')" />
                <el-option value="edit" :label="$t('编辑')" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="shareOpen = false">{{ $t('取 消') }}</el-button>
        <el-button size="small" type="primary" @click="shareHandle">{{ $t('确 定') }}</el-button>
      </span>
    </el-dialog>

    <!--  发布菜单  -->
    <el-dialog v-el-drag-dialog :title="$t('菜单')" :visible.sync="menuFormOpen" width="70%" class="dataForm" :close-on-click-modal="false" :lock-scroll="false">
      <div style="height: 450px;overflow: auto;padding: 20px;margin: -20px;">
        <el-form ref="menuForm" :model="menuForm" :rules="menuRules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('上级菜单')">
                <treeselect v-model="menuForm.parentId" :options="menuOptions" :show-count="true" :placeholder="$t('请选择')">
                  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                    {{ $t(node.label) }}
                    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
                  </label>
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="height: 84px">
              <el-form-item :label="$t('菜单类型')" prop="menuType">
                <el-radio-group v-model="menuForm.menuType">
                  <el-radio label="M">{{ $t('目录') }}</el-radio>
                  <el-radio label="C">{{ $t('菜单') }}</el-radio>
                  <el-radio label="F">{{ $t('页签') }}</el-radio>
                  <el-radio label="Z">{{ $t('子页签') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单图标')">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selected" />
                  <el-input slot="reference" v-model="menuForm.icon" :placeholder="$t('菜单图标')" readonly>
                    <svg-icon v-if="menuForm.icon" slot="prefix" :icon-class="menuForm.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单标识')" prop="menuKey">
                <el-input v-model="menuForm.menuKey" :placeholder="$t('菜单标识')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('菜单名称')" prop="menuName">
                <el-input v-model="menuForm.menuName" :placeholder="$t('菜单名称')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('显示排序')" prop="orderNum">
                <el-input-number v-model="menuForm.orderNum" controls-position="right" :min="0" :max="9999" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('组件路径')" prop="component">
                <el-input v-model="menuForm.component" disabled :placeholder="$t('组件路径')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('权限标识')">
                <el-input v-model="menuForm.perms" :placeholder="$t('权限标识')" :maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('是否外链')">
                <el-radio-group v-model="menuForm.isFrame">
                  <el-radio label="0">{{ $t('是') }}</el-radio>
                  <el-radio label="1">{{ $t('否') }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('菜单状态')">
                <el-radio-group v-model="menuForm.visible">
                  <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="$t(dict.dictValue)">{{ $t(dict.dictLabel) }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!--  菜单权限 -->
            <el-col :span="24">
              <div style="margin: 10px auto;display: inline-block;width:100%;">
                <div class=" area-header">
                  <span class="area-header-title">{{ $t('菜单权限') }}</span>
                </div>
                <el-table :data="menuForm.permissionList" border class="formTable">
                  <el-table-column :label="$t('序号')" align="center" type="index" width="50" />
                  <el-table-column :show-overflow-tooltip="true">
                    <template slot="header" slot-scope="{}">
                      <i style="color: #ff4949;margin-right: 4px;">*</i><span>{{ $t('名称') }}</span>
                    </template>
                    <template slot-scope="scope">
                      <el-form-item :prop="'permissionList.' + scope.$index + '.name'" :rules="rules.name">
                        <el-input v-model="scope.row.name" />
                      </el-form-item>

                    </template>
                  </el-table-column>
                  <el-table-column :show-overflow-tooltip="true">
                    <template slot="header" slot-scope="{}">
                      <i style="color: #ff4949;margin-right: 4px;">*</i><span>{{ $t('权限标签') }}</span>
                    </template>
                    <template slot-scope="scope">
                      <el-form-item :prop="'permissionList.' + scope.$index + '.permission'" :rules="rules.permission">
                        <el-input v-model="scope.row.permission" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('排序')" prop="sort">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.sort" controls-position="right" :precision="0" />
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('操作')" align="center" width="50" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="delPermission(scope.$index, scope.row)" />
                    </template>
                  </el-table-column>
                </el-table>

                <div class="tol">
                  <el-button type="primary" icon="el-icon-plus" size="mini" @click="AddRow">{{ $t("添加") }}</el-button>
                </div>

              </div>
            </el-col>

          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("确定") }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { saveJmfDir, getCurrentUserJmfDirAndFile, getJmfDir, delJmfDir } from '@/api/dev/jmf/jmfDir'
import { getTreeDataSet } from '@/api/dev/jmf/jmfDataSet'
import { delJmfReport, dragDir } from '@/api/dev/jmf/jmfReport'
import {
  saveJmfReportShared,
  delJmfReportShared,
  getByReportId,
  getUserBySharedDirId,
  deleteBySharedDirId
} from '@/api/dev/jmf/jmfReportShared'
import { allRole } from '@/api/system/role'
import { saveMenu, treeselect } from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'

export default {
  components: {
    Treeselect,
    IconSelect
  },
  data() {
    return {
      viewReportURL: '',
      // 菜单
      menuForm: {},
      // 菜单弹出框
      menuFormOpen: false,
      menuOptions: [],
      // 菜单状态
      visibleOptions: [],
      form: {
        id: undefined,
        name: undefined,
        type: undefined,
        groupType: undefined
      },
      tabPos: 'report',
      newDir: false,
      shareForm: {
        userId: undefined,
        roleId: undefined,
        permissions: undefined,
        reportId: undefined,
        sharedDirId: undefined
      },
      // 分享
      shareOpen: false,
      // 新建报表
      createReportOpen: false,
      dataSetOptions: [],
      // 选择的数据集列
      selectedColumns: [],
      // 选择的数据集列的数据
      selectedColumnsData: [],
      filterText: '',
      // 我创建的
      data: [],
      // 分享给我的
      sharedData: [],
      loading: false,
      // 文件夹列表遮罩层
      dirLoading: false,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 文件夹弹出层标题
      dirTitle: this.$t('新建文件夹'),
      // 角色列表
      roleOptions: [],
      rules: {
        name: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        permissions: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      },
      // 表单校验
      menuRules: {
        component: [{
          required: false,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        menuName: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        orderNum: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }],
        permission: [{
          required: true,
          message: this.$t('必填信息'),
          trigger: 'blur'
        }]
      },
      baseUrl: process.env.VUE_APP_BASE_PATH

    }
  },
  watch: {
  },
  created() {
    this.initUserDir()
    getTreeDataSet().then(res => {
      this.dataSetOptions = res.data
    })
    this.getDicts('sys_show_hide').then(response => {
      this.visibleOptions = response.data
    })
    allRole().then(res => {
      this.roleOptions = res.data
    })
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleClick() {
      if (this.tabPos === 'chart') {
        this.data = [{ dirType: 'dir', name: '数据大屏', children: [{ name: '大屏' }] }]
        this.sharedData = []
      } else {
        this.initUserDir()
      }
    },
    // 初始化用户文件夹
    initUserDir(filterText) {
      this.dirLoading = true
      getCurrentUserJmfDirAndFile(filterText).then(res => {
        this.data = res.data.me
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i].reportId) {
            if (this.data[i].reportType === 'report') {
              this.viewReportURL = this.baseUrl + 'viewReportSheet?reportId=' + this.data[i].reportId
            } else if (this.data[i].reportType === 'easy') {
              this.viewReportURL = this.baseUrl + 'viewEasyReport?reportId=' + this.data[i].reportId
            }
            this.$refs.tree.setCurrentKey(this.data[i].reportId)
            break
          }
          if (this.data[i].children && this.data[i].children.length > 0) {
            if (this.data[i].children[0].reportType === 'report') {
              this.viewReportURL = this.baseUrl + 'viewReportSheet?reportId=' + this.data[i].children[0].reportId
            } else if (this.data[i].children[0].reportType === 'easy') {
              this.viewReportURL = this.baseUrl + 'viewEasyReport?reportId=' + this.data[i].children[0].reportId
            }
            this.$refs.tree.setCurrentKey(this.data[i].children[0].reportId)
            break
          }
        }
        this.sharedData = res.data.shared
        this.dirLoading = false
      })
    },
    handleCommand(command, type) {
      if (command === 'mkdir') {
        this.dirTitle = this.$t('新建文件夹')
        this.newDir = true
        this.form = {
          id: '',
          name: undefined,
          type: type,
          groupType: 'table'
        }
      }
    },
    closeForm() {
      this.newDir = false
      this.reset()
    },
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        type: undefined,
        groupType: undefined
      }
      this.resetForm('form')
    },
    saveDir() { // 新建文件夹
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveJmfDir(this.form).then(response => {
              if (response.code === 200) {
                  this.msgSuccess(this.$t('保存成功'))
                  this.closeForm()
                  this.initUserDir()
              } else {
                  this.msgError(response.msg)
              }
              this.loading = false
          })
        }
      })
    },
    nodeClick(data) {
      if (data.dirType !== 'dir') {
        if (data.reportType === 'report') {
          this.viewReportURL = this.baseUrl + 'viewReportSheet?reportId=' + data.reportId
        } else if (data.reportType === 'easy') {
          this.viewReportURL = this.baseUrl + 'viewEasyReport?reportId=' + data.reportId
        }
      }
    },
    reportDropdownClick(val, data) {
      if (val === 'share') {
        getByReportId(data.reportId).then(res => {
          if (res.data) {
            this.shareForm = res.data
          } else {
            this.shareForm = {
              userId: [],
              roleId: [],
              permissions: undefined,
              reportId: data.reportId
            }
          }
          this.shareOpen = true
        })
      } else if (val === 'delReport') {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
          return delJmfReport(data.reportId)
        }).then(() => {
          this.initUserDir()
          this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
      } else if (val === 'release') {
        if (data.reportType === 'report') {
          this.releaseHandle(data.reportId, 'dev/jmf/releaseMenuView')
        } else if (data.reportType === 'easy') {
          this.releaseHandle(data.reportId, 'dev/jmf/releaseEasyReport')
        }
      } else if (val === 'export') {
        if (data.reportType === 'report') {
          this.viewReportURL = '/viewReportSheet?reportId=' + data.reportId + '&export=true&name=' + data.name
        } else if (data.reportType === 'easy') {
          this.downLoadExcel('/report/jmfReport/exportEasyReport', { reportId: data.reportId }).then(() => {
            this.msgSuccess(this.$t('导出成功'))
          })
        }
      }
    },
    // 分享
    reportShareClick(val, data) {
      if (val === 'delShareReport') {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
          return delJmfReportShared(data.shareId)
        }).then(() => {
          this.initUserDir()
          this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
      } else if (val === 'export') {
        if (data.reportType === 'report') {
          this.viewReportURL = '/viewReportSheet?reportId=' + data.reportId + '&export=true&name=' + data.name
        } else if (data.reportType === 'easy') {
          this.downLoadExcel('/report/jmfReport/exportEasyReport', { reportId: data.reportId }).then(() => {
            this.msgSuccess(this.$t('导出成功'))
          })
        }
      }
    },
    // 分享保存
    shareHandle() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.shareForm.userId?.length === 0 && this.shareForm.roleId?.length === 0) {
            this.msgError(this.$t('请选择分享人员'))
            return
          }
          saveJmfReportShared(this.shareForm).then(res => {
            if (res.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.shareOpen = false
              this.resetForm('shareForm')
            } else {
              this.msgError(res.msg)
            }
          })
        }
      })
    },
    refreshHandle() {
      alert('refresh')
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.menuOptions = []
        const menu = {
          id: 0,
          label: this.$t('主类目'),
          children: []
        }
        menu.children = response.data
        this.menuOptions.push(menu)
      })
    },
    releaseHandle(reportId, component) {
      this.menuFormOpen = true
      this.menuForm = {
        menuId: undefined,
        menuKey: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: 'C',
        orderNum: undefined,
        isFrame: '1',
        visible: '0',
        permissionList: []

      }
      this.menuForm.component = component + '?reportId=' + reportId
      this.getTreeselect()
    },
    // 删除行
    delPermission(index) {
      this.menuForm.permissionList.splice(index, 1)
    },
    AddRow() {
      const row = {
        name: '',
        permission: '',
        sort: this.menuForm.permissionList.length + 1
      }
      if (this.menuForm.component) {
        switch (this.menuForm.permissionList.length) {
          case 0:
            row.name = '编辑'
            row.permission = this.menuForm.component.split('/')[0] + ':' + this.menuForm.component.split('/')[1] + ':edit'
            break
          case 1:
            row.name = '删除'
            row.permission = this.menuForm.component.split('/')[0] + ':' + this.menuForm.component.split('/')[1] + ':remove'
            break
          case 2:
            row.name = '导出'
            row.permission = this.menuForm.component.split('/')[0] + ':' + this.menuForm.component.split('/')[1] + ':export'
            break
        }
      }
      this.menuForm.permissionList.push(row)
    },
    // 取消按钮
    cancel() {
      this.menuFormOpen = false
      this.menuForm = {}
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['menuForm'].validate(valid => {
        if (valid) {
          this.menuForm.scene = '0'
          saveMenu(this.menuForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('修改成功'))
              this.menuFormOpen = false
            } else {
              this.msgError(response.msg)
            }
          })
        }
      })
    },
    // 选择图标
    selected(name) {
      this.menuForm.icon = name
    },
    // 是否可以拖拽
    allowDragFunc(node) {
      // 除了文件夹都可以拖拽
      return node.data.dirType !== 'dir'
    },
    // 是否可以放置
    allowDropFunc(draggingNode, dropNode) {
      // 除了报表都可以放置
      return dropNode.data.dirType !== 'report'
    },
    // 拖拽完成时触发的事件
    nodeDropHandle(before, after, position) {
      console.log(before)
      const params = {
        dirId: position === 'inner' ? after.data.dirId : undefined,
        type: before.data.type
      }
      if (params.type === 'me') {
        params.reportId = before.data.reportId
      } else {
        params.reportId = before.data.shareId
      }
      dragDir(params)
    },
    // 文件夹下拉事件
    dirCommand(val, node) {
      switch (val) {
        case 'edit':
          getJmfDir(node.data.dirId).then(res => {
            this.form = res.data
            this.dirTitle = this.$t('修改文件夹')
            this.newDir = true
          })
          break
        case 'shared':
          getUserBySharedDirId(node.data.dirId).then(res => {
            if (res.data) {
              this.shareForm = res.data
            } else {
              this.shareForm = {
                userId: [],
                roleId: [],
                permissions: undefined,
                sharedDirId: node.data.dirId
              }
            }
            this.shareOpen = true
          })
          break
        case 'delete':
          if (node.data.permissions) {
            deleteBySharedDirId(node.data.dirId).then(res => {
              if (res.code === 200) {
                this.msgSuccess(this.$t('删除成功'))
                this.initUserDir()
              }
            })
            return
          }
          if (node.childNodes.length > 0) {
            this.$confirm(this.$t('该文件夹下还有报表，会一并删除，是否确认删除'), this.$t('警告'), {
              confirmButtonText: this.$t('确定'),
              cancelButtonText: this.$t('取消'),
              type: 'warning'
            })
              .then(function() {
                return delJmfDir(node.data.dirId)
              })
              .then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(this.$t('删除成功'))
                  this.initUserDir()
                }
              })
              .catch(function() {})
          } else {
            delJmfDir(node.data.dirId).then(res => {
              if (res.code === 200) {
                this.msgSuccess(this.$t('删除成功'))
                this.initUserDir()
              }
            })
          }
          break
      }
    },
    queryHandle() {
      this.initUserDir(this.filterText)
    }
  }

}
</script>

<style scoped>
  .components-container {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .iframe {
    margin:0;
    padding:0;
    position:absolute;
    width:99.5%;
    top: 0;
    bottom:0;
  }

</style>

